
<template>
  <div class="releaseShow">
    <div class="main" style="position: relative;">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in list" :key="index">
          <el-card :body-style="{ padding: '0px' }">
            <!-- <div class="image">
              <el-image
                style="width: 100%; height: 100%"
                :src="item.a"
                fit="cover">
                </el-image>
            </div> -->
            <div style="padding: 14px">
              <span style="font-size: 18px !important;">{{ item.name }}</span>
              <div class="bottom clearfix">
                <time class="time">版本：{{ item.versions }}</time>
                <p class="time">编号：{{ item.number }}</p>
                <div class="contentText">
                  <span v-html="item.remark"></span>
                </div>
                <p style="text-align: right;font-size: 20px !important;">{{ item.price }} 元</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <vxe-pager
      perfect
      size="mini"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :page-sizes="tablePage.pageSizes"
      :total="tablePage.totalResult"
      @page-change="pageChange"
      style="position:absolute;
    bottom: 20px;
    right: 20px;"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
      </vxe-pager>
    </div>
  </div>
</template>
<style lang="scss" scoped>
// 卡片的样式
.contentText {
  background-color: rgba(238, 238, 238, 0.5);
  margin: 5% 0;
  padding: 3%;
  height: 75px;
  span {
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.time {
  line-height: 25px;
  font-size: 13px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 20vh;
  display: block;
  overflow: hidden;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
<script>
import { getBuyGoodsInfo } from '@/api/buy_goods'
export default {
  props: {},
  components: {},
  data() {
    return {
      list: [
        {
          a: 'https://img0.baidu.com/it/u=3161026183,24429140&fm=26&fmt=auto&gp=0.jpg',
          b: '功能商品1',
          c: '2021-03-22',
          d: '这里是对该功能的描述。'
        },
        {
          a: 'https://img2.baidu.com/it/u=1887697353,1431316331&fm=26&fmt=auto&gp=0.jpg',
          b: '功能商品2',
          c: '2021-03-22 ',
          d: '这里是对该功能的描述。'
        }
      ],
      switchVal: true,
      detailsHTML: '',
      // 分页
      tablePage: {
          currentPage: 1,
          pageSize: 15,
          pageSizes: [15, 30, 45, 60],
          totalResult: 0
      },
      parkId: Cookies.get('parkId')
    }
  },
  methods: {
    // 根据页切换
    pageChange(val){
      console.log('page val', val)
      this.tablePage.currentPage = val.currentPage
      let page = val.currentPage
      let limit = val.pageSize
      this.init(page, limit)
    },
    init(page, limit){
      getBuyGoodsInfo(page, limit, 1, this.parkId).then(res => {
        console.log('商品 res', res)
        this.list = res.data
        this.tablePage.totalResult = res.count
      })
    },
  },
  created() {},
  mounted() {
    this.init(this.tablePage.currentPage, this.tablePage.pageSize)
  }
}
</script>
